<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<!--  jquery -->
<script src="../js/jquery-1.8.1.js"></script>



    <script src="../ui/jquery.ui.core.js"></script>
	<script src="../ui/jquery.ui.widget.js"></script>
	<script src="../ui/jquery.ui.mouse.js"></script>
	<script src="../ui/jquery.ui.draggable.js"></script>
	<script src="../ui/jquery.ui.sortable.js"></script>
	
	<link href="../css/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
	
	    <link rel="stylesheet" href="../css/codemirror.css">
    <script src="../js/codemirror.js"></script>
    <script src="../js/xml.js"></script>
	
	<script type="text/javascript" src="../js/jquery.reveal.js"></script>
	
		<!-- Attach our CSS -->
	  	<link rel="stylesheet" href="../css/reveal.css">	



<script type="text/javascript" src="../js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" media="screen" />

<script type="text/javascript">
	$(document)
			.ready(
				function() {
					//$('.fancybox').fancybox();
					$("#content_of_fancybox").fancybox();
					var buildlist;  
					 buildlist = "<ul id=\"sortable\">";
					 // inital post start
						$.post("../connectors/milestoneConnector.jsp",  function(data) {
								  $.each(data, function(index, element) {
								  var xmlDiv = "<div id='xmlContent_'"+data[index].mileStoneID+"'><textarea id='code' name='code'>"+data[index].mileStoneXML+"</textarea></div>";
								  var anchor = "<div> <a href='#' class='fancybox11' >edit</a><a href='#' class='fancybox11' >edit</a><a href='#' class='fancybox11' >edit</a></div>";
										 buildlist = buildlist + "<li id='listtasks_"+data[index].mileStoneID+"'>"+data[index].mileStoneName+"<div id='listtasks_"+data[index].mileStoneID+"'>"+anchor+xmlDiv+"</div></li>";
            						});
            		   buildlist = buildlist + "</ul>";
					   $("#listdiv").html(buildlist);
					   $( "#sortable" ).sortable();
					   //$( "#sortable" ).disableSelection();
						formatXML();
						    } );
				
				
				// Runs after every move in the sorted list
				$('#sortable').sortable({
			update: function(event, ui) {
				var milestoneOrder = $(this).sortable('toArray').toString();
				alert( "milestoneOrder="+milestoneOrder);
			}
			});
		
				 // flow button code starts     
				 $( "#flowid").click(function(){
				 
				 	var result = $('#sortable').sortable('toArray');
				 	alert(result);
				 	
				 	    $("#sortable > li").each(function(n,item){
				 	    alert("inside");
                        if (item.id=="listtasks_3") {
                            //jQuery(item).effect("fade", {}, 500, function(){
                            //    jQuery(item).remove();
                            //});
                            $(item).hide(500, function(){
                                $(item).remove();
                            });
                        }
				 	
                    });
                     result = $('#sortable').sortable('toArray');
                    
                });
                
                
                 $('#btn').click(function () {

                alert('loading...');
                var divObject = document.createElement('div');
                divObject.setAttribute('id', 'divEditable2');
                var editorContent = '<textarea rows="5" cols="55">sample text' + '</textarea><input type="button" value="Save Edits" id="btnSaveEdits" style="margin-left: 300px;" onclick="HideTextArea(event);"/><input type="button" value="Cancel Edits" id="btnCancelEdits" style="margin-left: 5px;" onclick="DoCleanUp();"/>';
				$('#divEditable2').append('<textarea  id=\'code\' name=\'code\' rows="5" cols="55"><test><a1></a1></test>' + '</textarea><input type="button" value="Save Edits" id="btnSaveEdits" style="margin-left: 300px;" onclick="HideTextArea(event);"/><input type="button" value="Cancel Edits" id="btnCancelEdits" style="margin-left: 5px;" onclick="DoCleanUp();"/>');

                /*$.fancybox({
                    //'modal' : true,
                    //'type' : 'inline',
                    'autoDimensions': false,
                    'width': 700,
                    'height': 420,
                    'showCloseButton': true,
                    //'hideOnOverlayClick': true,
                    //'enableEscapeButton': true,
                    'href': '#content_of_fancybox'
                });*/
            });
        
                /*
                $(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    afterLoad   : function() {
        this.inner.prepend( '<h1>1. My custom title</h1>' );
        this.content = '<h1>2. My custom title</h1>' + this.content.html();
    }
});*/
                
				// document ready ends below-----------
				 	});

function formatXML()
{
  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: {name: "xml", alignCDATA: true},
        lineNumbers: true
      });
}
</script>


<script>
	
	</script>
	
	<style>
  ul { width: 600px; list-style: none; margin: 0; padding: 0; }
  li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid pink; list-style: none; padding-left: 42px; }
  li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
  .ui-selecting { background: #eee; }
  .ui-selecting .handle { background: #ddd; }
  .ui-selected { background: #def; }
  .ui-selected .handle { background: #cde; }

</style>
	
	
</head>
<body>


<div id="listdiv">
</div>

<input type="button" value="flow" id="flowid" />

<a href="#" class="big-link" data-reveal-id="myModal">
			Fade and Pop
		</a>	
		
			<div id="myModal" class="reveal-modal">
			<h1>Reveal Modal Goodness</h1>
			<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
		
		
		<a id="inline" class="fancybox" href="#data">This shows content of element who has id="data"</a>

	<div style="display: none;">
        <div id="divEditable2"></div>
    </div>
 <input type="button" id="btn" value="show" />

<!-- 
<a href="#test" class="fancybox">Open</a>

<div id="test" style="display:none;width:300px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit, mi sed sollicitudin hendrerit, elit elit tristique velit, ut sagittis urna dolor non metus. Fusce viverra lacus sit amet urna porttitor eu mollis massa hendrerit.
</p>
</div>
 -->

<textarea   id="content_of_fancybox" cols="55" rows="5" name="code" ><test><a1></a1></test></textarea>

<a href="#test" class="fancybox11">hhhhh</a>
<script>
$("a.fancybox11").each(function() {
    var element = this;
    $(this).fancybox({
        'titleFormat'   : function() {
            var astring = '<span>' + element.id + '</span>';
            return astring;
        }
    });
});
</script>

</body>
</html>